<template>
  <div>
    <el-button type="primary" @click="addCategory">新增分类</el-button>
    <el-table :data="list">
      <el-table-column prop="id" label="#" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="编码" />
      <el-table-column prop="remark" label="描述" />
      <el-table-column prop="createdAt" label="创建时间" />
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button @click="editCategory(scope.row)">编辑</el-button>
          <el-button @click="deleteCategory(scope.row.id)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination v-model:current-page="page" v-model:page-size="size" :page-sizes="[10, 20, 50, 100]"
      :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getList"
      @current-change="getList" />

    <my-dialog :title="dialogTitle" ref="dialogRef" @opened="handleDialogOpened" @confirm="submitForm"
      @closed="handleDialogClosed">
      <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
        <el-form-item label="ID" prop="id" v-if="editId">
          <el-input v-model="ruleForm.id" disabled />
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="编码" prop="code">
          <el-input v-model="ruleForm.code" />
        </el-form-item>
      </el-form>
    </my-dialog>
  </div>
</template>

<script lang="ts" setup>
import {ref, onMounted, reactive} from 'vue';
import {getCategoryListApi, createCategoryApi, updateCategoryApi, deleteCategoryApi} from '@/api/category';
import type {CategoryCreateDto, CategoryUpdateDto, CategoryListDto, CategorySingleDto} from '@/dtos/category.dto';
import MyDialog from '@/components/dialog/my-dialog.vue';

const list = ref<CategoryListDto[]>([]);
const total = ref(0);
const page = ref(1);
const size = ref(10);

const editId = ref<string>("");
const dialogRef = ref<InstanceType<typeof MyDialog>>();
const dialogTitle = ref<string>("编辑分类");
const ruleFormRef = ref();
const ruleForm = reactive<CategorySingleDto>({
  id: '',
  code: '',
  name: '',
  isVisible: true,
  level: 0,
  parentId: '',
  sortOrder: 0,
});

const rules = reactive({
  name: [{required: true, message: '请输入名称', trigger: 'blur'}],
  code: [{required: true, message: '请输入编码', trigger: 'blur'}],
});

const getList = async () => {
  const res = await getCategoryListApi({page: page.value, size: size.value});
  list.value = res.list;
  total.value = res.total;
};

const submitForm = async () => {
  await ruleFormRef.value?.validate(async (valid: any) => {
    if (valid)
    {
      if (editId.value)
      {
        await updateCategoryApi(editId.value, ruleForm);
      } else
      {
        await createCategoryApi(ruleForm);
      }
      getList();
      dialogRef.value?.closeDialog();
    }
  });
};

const handleDialogOpened = () => {
  if (editId.value)
  {
    dialogTitle.value = "编辑分类";
    // TODO: 获取分类详情
  } else
  {
    dialogTitle.value = "新增分类";
    Object.assign(ruleForm, {id: '', name: '', code: '', remark: ''});
  }
};

const handleDialogClosed = () => {
  ruleFormRef.value?.resetFields();
};

const addCategory = () => {
  editId.value = '';
  dialogRef.value?.openDialog();
};

const editCategory = (row: CategoryListDto) => {
  editId.value = row.id;
  dialogRef.value?.openDialog();
};

const deleteCategory = async (id: string) => {
  ElMessageBox.confirm("确定要删除吗？", '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await deleteCategoryApi(id);
    getList();
  });
};

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped></style>